
//倒计时的时间
var TIME = 60;
Page({

  //非常重要
  //只有写在 data 里面的属性 才能在wxml中使用 才能展示
  //才可以使用 数据双向绑定的功能
  data: {
    //表示 色块行数的 属性
    row:2,
    //盛放色块详细信息的数组
    items:[],
    //倒计时的时间
    time:TIME,
    //分数
    score:0,
    //步数
    step:0

  },

  //初始化页面调用
  //可以在 这个函数中 初始化不在 wxml中使用的属性，不用写在data中
  onLoad:function(){
    this.width = 750;
    this.getDeviceWidth();
    this.gameCore();
    //初始化titles的数组
    this.titles = ["一只狗","一只se狗","一头狼","一头孤狼","一头色狼"];
    //获取titles的下标
    this.titleIndex = 0;
  },

  //游戏的核心部分
  gameCore:function(){
    // 每一个色块的间距
    var tempColorViewWidth = this.width / this.data.row;//平均分的 临时色块宽度
    var space = tempColorViewWidth * 0.1;//计算后的 色块间距

    // 色块的宽度 = (总宽度 - 总间距)/一行有多少色块
    var allSpace = space * (this.data.row + 1);//总间距
    var ColorViewWidth = (this.width - allSpace) / this.data.row;

    

    //获取随机颜色
    var color = this.randColor();

    // 设置特殊颜色是哪一个色块
    var allNums = this.data.row * this.data.row;
    var specialIndex = parseInt(Math.random() * allNums);


    var tempList = [];
    //循环创建色块的信息放入数组
    for (var i = 0; i < allNums; i++) {
      var info = {
        width: ColorViewWidth,
        color: color,
        space: space,
        opacity: i == specialIndex ? 0.8 : 1,
      }
      tempList.push(info);
    }
    this.setData({
      items: tempList
    });
  },

  //随机颜色函数
  randColor:function(){
    //parseInt(Math.random() * 256)随机一个0~255之间的整数
    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);
    //"+r+", "+g+", "+b+" 字符串的拼接
    return "rgb("+r+","+g+","+b+")";
  },

  //获取设备的宽度
  getDeviceWidth:function(){
    wx.getSystemInfo({
      success: function(res) {
        this.width = res.windowWidth;
      }.bind(this)
    })
  },

  success:function(){
    //成功时候 更新行数row的值
    //如果做难度扩展 可以添加专门改变this.data.row的值的函数
    this.setData({
      row:++this.data.row,
      step:++this.data.step
    });
    //走五步 给一分
    if(this.data.step % 2 == 0){
      this.setData({
        score:++this.data.score
      })
    }
    if (this.data.step% 4 == 0) {
      ++this.titleIndex;
    }
    //防止数组越界
    if (this.titleIndex >= this.titles.length) {
      this.titleIndex = this.titles.length - 1;
    }
  },

  getTitle:function(){
    return this.titles[this.titleIndex];
  },

  fall: function () {
    //重置时间的状态、行数
    this.setData({
      row:2,
      time:TIME,
      score:0
    });
    

    clearInterval(this.timer);
    wx.showModal({
      title: '温馨提示',
      content: '判断您为'+this.getTitle()+'是否重新开始判断',
      showCancel: true,
      cancelText: '结束游戏',
      cancelColor: 'red',
      confirmText: '重新开始',
      confirmColor: 'orange',
      success: function(res) {
        console.log(res);
        //点击 结束游戏 返回上一页
        //点击 重新开始 重新开始游戏
        res.cancel?this.back():this.reStartGame();
      }.bind(this)
    })
    this.titleIndex = 0;
    this.data.step = 0;
  },

  back:function(){
    wx.navigateBack();
    // todo: 上传分数到服务器
  },
  reStartGame:function(){
    this.timer = setInterval(this.updateTime,1000)
    this.gameCore();
  },
  showMessage: function (event) {
    var opacity = event.target.dataset.opacity;

    opacity != 1 ? this.success():this.fall();
    this.gameCore();
  },


  //更新时间的函数
  updateTime:function(){
    this.setData({
      time:--this.data.time
    });
    if (this.data.time <= 0) {
      this.fall();
    }
  },

 
  //页面显示时候调用
  onShow:function(){
    this.timer = setInterval(this.updateTime,1000);//this.updateTime不是调用函数，只是把名字给它
    this.playMusic();
  },

  onUnload:function(){
    clearInterval(this.timer);
    this.timer = null;
    this.stopMusic(); 
  },
  playMusic:function(){
    wx.playBackgroundAudio({
      dataUrl: 'http://bmob-cdn-19175.b0.upaiyun.com/2018/05/16/36b5c18040d21a338010fc5a847c31e6.mp3'
    })
  },
  stopMusic:function(){
    wx.stopBackgroundAudio();
  }
})